<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="route in breadCrumdData" :key="route.path" :to="{ path: route.path }">{{
                route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div>
        <router-link to="/">主页</router-link>
    </div>
    <div>
        <router-link to="/menu">菜单页</router-link>
    </div>
    <div>
        <RouterView />
    </div>
</template>

<script setup>
import { watch, ref } from 'vue'
import { useRoute } from 'vue-router';
const breadCrumdData = ref([])
// 获取当前路由信息（路由路径、参数、meta）
const route = useRoute()

watch(route, () => {
    console.log('route.matched=>', route.matched)
    breadCrumdData.value = route.matched
})
</script>

<style lang="scss" scoped></style>